<script setup>
import { ref, onMounted, watch } from 'vue';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, CandlestickChart } from 'echarts/charts';
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  MarkLineComponent,
  MarkAreaComponent
} from 'echarts/components';
import VChart from 'vue-echarts';

use([
  CanvasRenderer,
  LineChart,
  CandlestickChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  MarkLineComponent,
  MarkAreaComponent
]);

const props = defineProps({
  stock: String,
  timeFrame: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['update:timeFrame']);

const predictionData = ref(null);
const confidenceInterval = ref(90);
const chartOption = ref({});

const handleTimeFrameChange = (event) => {
  emit('update:timeFrame', event.target.value);
};

onMounted(async () => {
  // 初始化图表和数据
  generateMockData();
});

watch([() => props.stock, () => props.timeFrame], async () => {
  // 更新预测数据
  generateMockData();
});

// 生成模拟数据
function generateMockData() {
  const baseTime = new Date().getTime();
  const timeStep = props.timeFrame === '30min' ? 30 * 60 * 1000 : 
                   props.timeFrame === '2h' ? 2 * 60 * 60 * 1000 : 24 * 60 * 60 * 1000;
  
  // 历史数据
  const historicalData = [];
  const historicalDates = [];
  let basePrice = 100 + Math.random() * 50;
  
  // 生成20个历史数据点
  for (let i = 0; i < 20; i++) {
    const time = new Date(baseTime - (20 - i) * timeStep);
    historicalDates.push(time.toLocaleTimeString());
    basePrice = basePrice + (Math.random() - 0.5) * 5;
    historicalData.push(basePrice);
  }
  
  // 预测数据
  const predictionDates = [];
  const predictionData = [];
  const upperBound = [];
  const lowerBound = [];
  const lastHistoricalPrice = historicalData[historicalData.length - 1];
  
  // 生成10个预测数据点
  for (let i = 0; i < 10; i++) {
    const time = new Date(baseTime + i * timeStep);
    predictionDates.push(time.toLocaleTimeString());
    
    const predictedChange = (Math.random() - 0.3) * 8; // 偏向上涨的随机变化
    const predictedPrice = lastHistoricalPrice + predictedChange * (i + 1) * 0.5;
    predictionData.push(predictedPrice);
    
    // 计算置信区间
    const ciRange = predictedPrice * 0.03 * (i + 1) * 0.3; // 随时间增加不确定性
    upperBound.push(predictedPrice + ciRange);
    lowerBound.push(predictedPrice - ciRange);
  }
  
  // 合并数据
  const allDates = [...historicalDates, ...predictionDates];
  
  // 设置图表选项
  chartOption.value = {
    title: {
      text: `${props.stock} ${props.timeFrame} 预测分析`,
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      }
    },
    legend: {
      data: ['历史价格', '预测价格', '置信区间'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: allDates,
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value',
      name: '价格',
      min: function(value) {
        return Math.floor(value.min * 0.95);
      },
      max: function(value) {
        return Math.ceil(value.max * 1.05);
      }
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    series: [
      {
        name: '历史价格',
        type: 'line',
        data: historicalData,
        showSymbol: false,
        lineStyle: {
          width: 2
        }
      },
      {
        name: '预测价格',
        type: 'line',
        data: Array(historicalData.length).fill('-').concat(predictionData),
        showSymbol: false,
        lineStyle: {
          width: 2,
          type: 'dashed'
        },
        itemStyle: {
          color: '#5470c6'
        }
      },
      {
        name: '置信区间',
        type: 'line',
        data: Array(historicalData.length).fill('-').concat(upperBound),
        lineStyle: {
          opacity: 0
        },
        stack: 'confidence',
        symbol: 'none'
      },
      {
        name: '置信区间',
        type: 'line',
        data: Array(historicalData.length).fill('-').concat(lowerBound),
        lineStyle: {
          opacity: 0
        },
        areaStyle: {
          color: '#ccc',
          opacity: 0.3
        },
        stack: 'confidence',
        symbol: 'none'
      }
    ]
  };
}
</script>

<template>
  <div class="bg-white rounded-lg shadow-lg p-4">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-bold">{{ stock }} 预测分析</h2>
      <div class="flex space-x-4">
        <select :value="timeFrame" @change="handleTimeFrameChange" class="rounded border p-2">
          <option value="30min">30分钟</option>
          <option value="2h">2小时</option>
          <option value="1d">次日</option>
        </select>
        <select v-model="confidenceInterval" class="rounded border p-2">
          <option value="80">80% 置信区间</option>
          <option value="90">90% 置信区间</option>
          <option value="95">95% 置信区间</option>
        </select>
      </div>
    </div>

   

    <!-- 关键指标 -->
    <div class="grid grid-cols-4 gap-4 mt-4">
      <div class="bg-blue-50 p-4 rounded-lg">
        <h3 class="text-sm text-blue-600 font-semibold">预测方向</h3>
        <p class="text-2xl font-bold text-blue-800">上涨</p>
      </div>
      <div class="bg-green-50 p-4 rounded-lg">
        <h3 class="text-sm text-green-600 font-semibold">预期收益</h3>
        <p class="text-2xl font-bold text-green-800">+2.3%</p>
      </div>
      <div class="bg-yellow-50 p-4 rounded-lg">
        <h3 class="text-sm text-yellow-600 font-semibold">置信度</h3>
        <p class="text-2xl font-bold text-yellow-800">87%</p>
      </div>
      <div class="bg-purple-50 p-4 rounded-lg">
        <h3 class="text-sm text-purple-600 font-semibold">波动预期</h3>
        <p class="text-2xl font-bold text-purple-800">中等</p>
      </div>
    </div>
     <!-- 预测图表区域 -->
     <div class="h-96 bg-gray-50 rounded-lg p-4">
      <v-chart class="w-full h-full" :option="chartOption" autoresize />
    </div>
  </div>
</template>

<style scoped>
/* 组件特定样式 */
</style>